import React, { useState, useRef } from 'react';
// import { HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
// import { Card, Typography, Alert } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { useIntl, useAccess, FormattedMessage } from 'umi';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import ProTable from '@ant-design/pro-table';
import type { TableListItem } from './data.d';
import { PlusOutlined } from '@ant-design/icons';
import { Button, message, Input, Drawer, Popconfirm } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { currentUser, allUsers, register, closeUser } from './service';

export default (props): React.ReactNode => {
  const actionRef = useRef<ActionType>();
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const { foo } = props;
  const access = useAccess();

  const renderRemoveUser = (text: string, userId: number) => (
    <Popconfirm
      key="popconfirm"
      title={`确认${text}吗?`}
      onConfirm={async () => {
        const { success } = await closeUser({ userId });
        if (success && actionRef.current) {
          actionRef.current.reload();
        }
      }}
      okText="是"
      cancelText="否"
    >
      <a>{text}</a>
    </Popconfirm>
  );
  const columns: ProColumns<TableListItem>[] = [
    {
      title: '用户ID',
      dataIndex: 'id',
      hideInForm: true,
      hideInSearch: true,
      editable: false,
    },
    {
      title: '用户名',
      dataIndex: 'name',
      hideInForm: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        1: { text: '正常', status: 'Success' },
        0: { text: '隐藏', status: 'Error' },
      },
    },
    {
      title: '最后登录时间',
      dataIndex: 'exitTime',
      hideInForm: true,
      hideInSearch: true,
      valueType: 'dateTime',
      width: 200,
    },
    {
      title: '操作',
      key: 'option',
      valueType: 'option',
      width: 300,
      render: (_, row, index, action) => {
        const node = renderRemoveUser('隐藏',row.id);
        return [node];
      },
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable<TableListItem>
        headerTitle={'查询表格'}
        search={false}
        actionRef={actionRef}
        rowKey="key"
        options={false}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleModalVisible(true);
            }}
          >
            <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
          </Button>,
        ]}
        request={(params) => allUsers({ ...params })}
        columns={columns}
      />
      <ModalForm
        title="新增数据"
        width="400px"
        visible={createModalVisible}
        onVisibleChange={handleModalVisible}
        onFinish={async (value) => {
          const success = await register(value);
          if (success) {
            handleModalVisible(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: '用户名必填!',
            },
          ]}
          label="用户名"
          width="md"
          name="username"
        />
        <ProFormText.Password
          rules={[
            {
              required: true,
              message: '密码必填!',
            },
          ]}
          label="密码"
          width="md"
          name="password"
        />
      </ModalForm>
    </PageHeaderWrapper>
  );
};
